<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>导航条</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <style>

    </style>
</head>
<body>
<div class="container" style="margin: 20px">

    <!--基础导航条-->
    <nav class="navbar navbar-default" role="navigation" style="padding-right: 20px">
    <div class="navbar-header">
    <a href="#" class="navbar-brand">LOGO</a>
    </div>
    <ul class="nav navbar-nav ">
    <li  class="active"><a href="#">主页</a></li>
    <li><a href="#">微博</a></li>
    <li><a href="#">图书</a></li>
    </ul>

    <!--在导航条中添加表单-->
    <form class="navbar-form navbar-right" role="search">
    <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-primary">搜索</button>
    </form>
    </nav>


</div>

<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>